<script setup lang="ts">
import rank1Img from './img/rank1.jpg'
import rank2Img from './img/rank2.jpg'

const dataArr = [
  {id: 1, type: '世界', img: rank1Img, name: '王德发', content: '这个游戏一点都不好玩'},
  {
    id: 2,
    type: '世界',
    img: rank2Img,
    name: '马保国',
    content: '我劝，这位年轻人耗子尾汁，好好反思，不要搞窝里斗，啊，来我被窝里斗！'
  },
]
</script>
<template>
  <div class="chat-world">
    <div class="chat" v-for="item in dataArr" :key="item.id">
      <div class="type">{{item.type}}</div>
      <img :src="item.img" alt="" class="rank"/>
      <div class="name">{{item.name}} </div>
      <div class="content">:{{item.content}}</div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.chat-world {
  display: flex;
  flex-direction: column;
  margin: 0.3em 0.3em 0.2em;

  .chat {
    display: flex;
    align-items: center;
    font-size: 0.9em;

    > * + * {
      margin-left: 0.3em;
    }

    .type {
      background-color: #1597e2;
      padding: 0.1em;
      border-radius: 0.2em;
    }

    .rank {
      height: 1em;
    }

    .content {
      color: #22d0eb;
      max-width: calc(12em + 100vw - 1024px);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    @media (max-width: 1024px) {
      .content {
        max-width: 12em;

      }
    }
  }
}

</style>